<template>
  <div class="lists_index">
    <!--顶部横条-->
    <Banner></Banner>
    <!--顶部横条-->



    <mainContent catname="六讲六传">
      <div slot="menu_list">
        <dl>
          <dt class="menu_dt" :style="{backgroundImage: 'url(' + menu_bg + ')'}">六讲六传</dt>
          <dd v-for="(item,index) in menu_list" class="menu_dd" :class="{'hover':cur_tab ==item.id }"
              @click="onTab(item)">{{item.title}}
          </dd>
        </dl>
      </div>

      <div slot="inner_content" class="inner_content">
        <div class="page_con">
          <!--公告公示-->
          <div class="lt_notice">
            <!--*********************-->
            <div class="contain_box">
              <div class="sixlist" v-for="(item,index) in lists" :key="index" @click="toListDetail(item.id)">
                <div class="six_img"><img :src="item.img" alt="暂无图片资源"
                                          style="width: 100%;height: 100%;object-fit: cover"></div>
                <div class="six_title">{{item.title}}</div>
              </div>

            </div>
            <!--*********************-->
          </div>
          <!--公告公示-->
        </div>
      </div>
    </mainContent>

    <footerBar></footerBar>
    <!--左侧漂浮菜单-->
    <MainMenu></MainMenu>
    <!--左侧漂浮菜单-->
  </div>
</template>

<script>
  import Banner from '../../components/bannder/Banner'
  import MainMenu from '../../components/mainmenu/MainMenu'
  import footerBar from '../../components/content/footerBar'
  import mainContent from '../../components/content/mainContent'

  export default {
    name: "sixNews",
    data() {
      return {
        cur_tab: '',
        menu_list: '',
        lists: [],//公告公示
        menu_bg:''
      }
    },
    components: {
      Banner,
      MainMenu,
      footerBar,
      mainContent,
    },
    created() {
      this.menu_bg=this.$util.storage.get("menu_bg");
      this.getCate();

    },
    methods: {
      getCate() {
        let that = this;
        that.$http.get('/api/WxProgramApi/getPropag', {vollege_id: this.$util.vollege_id}, r => {
          console.log('分类', r)
          that.menu_list = r.data;
          that.cur_tab = r.data[0].id;
          this.getList();
        })
      },

      toListDetail(id) {
        console.log('您点击了跳转路由事件！,公告公示id：', id);
        this.$router.push({path: '/detail', query: {id: id,name:'六讲六传'}});
      },

      getList() {
        this.$http.get("/api/WxProgramApi/getPropagList?cat_id=" + this.cur_tab + "&page=1&limit=1000", {vollege_id: this.$util.vollege_id}, r => {
          console.log('rr', r.data.data);
          this.lists = r.data.data;
        });
      },

      onTab(event) {
        this.cur_tab = event.id;
        this.getList();
      }

    },
  }
</script>

<style scoped>

  .lists_index {
    width: 100vw;
    height: 1080px;
    background: url("../../assets/images/banner/bg_banner1.jpg") center top no-repeat;
  }

  .inner_content {
    padding-top: 60px;
    box-sizing: border-box;
  }

  .lt_notice {
    /*padding: 56px 50px 0 260px;*/
  }

  .page_con {
    padding-right: 30px !important;
    box-sizing: border-box;
    padding-top: 0px !important;
    padding-left: 30px !important;
  }

  .it_notice {
    height: 667px;
    width: 1620px;
    box-sizing: border-box;
    overflow-y: scroll;
  }

  .contain_box {
    height: 100%;
    width: 100%;
    box-sizing: border-box;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-evenly;
  }

  .sixlist {
    height: 344px;
    width: 300px;
    border-radius: 8px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
  }

  .six_img {
    height: 220px;
  }

  .six_title {
    flex: 1;
    font-size: 24px;
    color: black;
    text-align: center;
    box-sizing: border-box;
    padding-top: 10px;
    /*display: flex;*/
    /*justify-content: center;*/
    /*align-items: center;*/
  }
</style>
